import React, {Component} from 'react';
import {
    Modal, Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Radio
} from 'antd';
import * as tools from '../../../tools/tools';
import $ from 'jquery';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class NodeAddOrModify extends Component {
    constructor(props) {
        super(props)
    };
    state = {
        confirmDirty: false,
        autoCompleteResult: [],
    };
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            console.log(this.props.isModify);
            if(this.props.isModify == 1) {
                this.upDateNode(values)
            }else {
                this.addNode(values)
            }
          }
        });
    }
    upDateNode = (data) => {
        var that = this;
        data.token = localStorage.token;
        data.pid = data.pid[data.pid.length-1];
        data.id = this.props.mdId;
        $.ajax({
            url : tools.apiUrl + 'manage/up_jurisdiction',
            data,
            type : 'post',
            success : function(res) {
                if(res.status == 1) {
                    that.props.onCancel();
                    that.props.upDateNodes();
                    that.props.form.resetFields();
                }
            }
        })
    }

    addNode = (data) => {
        var that = this;
        data.token = localStorage.token;
        console.log(data.pid)
        if(data.pid.length != 0) {
            data.pid = data.pid[data.pid.length-1];
        }else {
            data.pid = 0;
        }
        $.ajax({
            url : tools.apiUrl + 'manage/jurisdiction_add',
            data,
            type : 'post',
            success : function(res) {
                if(res.status == 1) {
                    that.props.onCancel();
                    that.props.upDateNodes();
                    that.props.form.resetFields();
                }
            }
        })
    }

    render() {
        var residences = this.props.parentData;//节点所有选项
        const { getFieldDecorator } = this.props.form;
        if(this.props.roleInfo.id != undefined) {
            var roleInfo = this.props.roleInfo;
            var ids = roleInfo.pids;
            var type = parseInt(roleInfo.type)
        }else {
            var roleInfo = {};
            var ids = [];
            var type = 1
        }
        return (
            <div>
                <Modal 
                    {...this.props.modalStyle}
                    onCancel={this.props.onCancel}
                    onOk={this.handleSubmit}
                    cancelText='取消'
                    okText='确定'
                >
                    <Form>
                        <Row>
                            <Col span={13}>
                                <FormItem
                                    label="归属栏目"
                                    >
                                    {getFieldDecorator('pid', {
                                        rules: [{ type: 'array',}],
                                        initialValue : ids
                                    })(
                                        <Cascader 
                                            changeOnSelect 
                                            options={residences}
                                            placeholder="请选择父级菜单"
                                        />
                                    )}
                                </FormItem>
                            </Col>
                            
                            <Col span={13}>
                                <FormItem
                                    label="结点类型"
                                    >
                                    {getFieldDecorator('type', {
                                        initialValue : type
                                    })(
                                        <RadioGroup>
                                            <Radio value={1}>导航</Radio>
                                            <Radio value={2}>页面操作</Radio>
                                        </RadioGroup>
                                    )}
                                </FormItem>
                            </Col>
                            
                            <Col span={13}>
                                <FormItem
                                    label="节点名称"
                                    hasFeedback
                                    >
                                    {getFieldDecorator('name', {
                                        rules: [{ required: true, message: '请输入节点名' }],
                                        initialValue : roleInfo.name
                                    })(
                                        <Input placeholder="输入节点名" />
                                    )}
                                </FormItem>
                            </Col>

                            <Col span={13}>
                                <FormItem
                                    label="节点路由"
                                    hasFeedback
                                    >
                                    {getFieldDecorator('url', {
                                        rules: [{ required: true, message: '请输入节点路由' }],
                                        initialValue : roleInfo.url
                                    })(
                                        <Input placeholder="输入节点路由" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            </div>
        )
    }
}
const WrappedNodeAddOrModify = Form.create()(NodeAddOrModify);



export default WrappedNodeAddOrModify